<template>
  <div>
    <div class="m-map" ref="mapContainer"></div>
  </div>
</template>

<script>
export default {
  name: 'Map',
  data () {
    return {
      map: ''
    };
  },
  mounted () {
    let L = window.L;
    let satellitePicMap = L.tileLayer('http://webst{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
      minNativeZoom: 0,
      subdomains: ['01', '02', '03', '04']
      // maxNativeZoom: 18
    });
    let annotionMap = L.tileLayer('http://webst{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}', {
      minNativeZoom: 0,
      subdomains: ['01', '02', '03', '04']
      // maxNativeZoom: 18
    });
    let roadMap = L.tileLayer('http://webrd{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
      minNativeZoom: 3,
      subdomains: ['01', '02', '03', '04']
    });
    let satelliteMap = L.layerGroup([satellitePicMap, annotionMap]);
    let baselayers = {
      '高德卫星图': satelliteMap,
      '高德街道图': roadMap
    };

    let southWest = L.latLng(-90, -225);
    let northEast = L.latLng(90, 225);
    let maxBounds = L.latLngBounds(southWest, northEast);

    this.map = L.map(this.$refs['mapContainer'], {
      center: [29.761772, 121.57735],
      zoom: 11,
      minZoom: 4,
      layers: satelliteMap,
      // worldCopyJump: true,
      maxBoundsViscosity: 1.0,
      maxBounds: maxBounds
    });
    let layerControl = L.control.layers(baselayers).addTo(this.map);
    layerControl.setPosition('topright');
    L.marker([29.761772,121.57735]).addTo(this.map);
    // L.marker([27, 104]).addTo(this.map);
    // L.marker([40, 117]).addTo(this.map);
  }
};
</script>

<style scoped>
  .m-map {
    width: 100%;
    height: 100%;
  }
</style>
